<template>
  <div class="detailHeader">
    <router-link tag="div" to="/" class="back-icon-start"  v-show="!headerShow"><span class="iconfont item-start">&#xe624;</span></router-link>
    <div class="header" v-show="headerShow" ref="header">
      <router-link tag="div" to="/" class="iconfont back-icon-move">&#xe624;</router-link>
      <div class="title">合肥融创水世界（原合肥万达水乐园）</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data: function () {
    return {
      headerShow: false
    }
  },
  methods: {
    headerMove: function () {
      const scrollT = document.documentElement.scrollTop
      if (scrollT > 0 && scrollT <= 140) {
        this.headerShow = true
        const el = this.$refs.header
        el.style.opacity = scrollT / 140
      } else if (scrollT === 0) {
        this.headerShow = false
      }
    }
  },
  created () {
    window.addEventListener('scroll', this.headerMove)
  },
  destroyed () {
    window.removeEventListener('scroll', this.headerMove)
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
  .detailHeader
    position: relative
    .back-icon-start
      width: .5rem
      height: .5rem
      position: absolute
      left:.13rem
      top: .22rem
      color:#fff
      background: #000
      border-radius: 100%
      opacity: .7
      z-index: 99
      .item-start
        position: absolute
        left:.05rem
        top: .05rem
    .header
      position: fixed
      top: 0
      left: 0
      right: 0
      height: .88rem
      background: $bgColor
      color: #fff
      z-index: 98
      opacity: 0
      .back-icon-move
        position: absolute
        text-align: center
        line-height: .88rem
        left: .2rem
      .title
        width: 100%
        font-size: .32rem
        text-align: center
        line-height: .88rem
</style>
